<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar1 :title="titleHeader"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content" v-if="complete">
			<view class="head">
				<view class="t_left"><text>{{ osConfig[myList.status] }}</text></view>
				<view class="t_right" @tap="detailsShow = true">
					<view>￥
						<block v-if="myList.status=='-2'||myList.status=='-3'">
							<text>{{ myList.isRefundInfoDTO?(myList.isRefundInfoDTO.amount||0):0 }}</text>
						</block>
						<block v-else>
							<text>{{ myList.realityPay }}</text>
						</block>
					</view>
					<!-- <image src="@/static/my/icon_right.png" mode=""></image> -->
				</view>
			</view>
			<view class="djs" v-if="myList.status==0&&djsTime">
				<uCountDown text="余票变动频繁剩余支付时间：" color="#ffffff" :fontSize="24" @finish="finish" :djsTime="djsTime" />
			</view>
			<view class="ticketInfo">
				<view class="name">
					{{ myList.jointName }}
				</view>
			</view>
			<view class="selectBar">
				<view :class="['bar', currentSelected == 2 ? 's2' : '']" @click="tabBarClick(1)">
					景点订单信息
				</view>
				<view :class="['bar', currentSelected == 1 ? 's1' : '']" @click="tabBarClick(2)">
					船票订单信息
				</view>
			</view>
			<!-- 景区信息 -->
			<view class="selectType" v-if="currentSelected == 1&& !cancelStatus">
				<template v-if="myList.scenicOrderMap">
					<view class="name">
						{{ myList.scenicOrderMap.scenicName }}
					</view>
					<view class="type">
						<block v-if="ticketList1Num">
							<span>成人票 × {{ ticketList1Num }}份</span>
						</block>
						<block v-if="ticketList1Num&&ticketList2Num">+</block>
						<block v-if="ticketList2Num">
							<span>儿童票 × {{ ticketList2Num }}份</span>
						</block>
						<block v-if="ticketList2Num&&ticketList3Num">+</block>
						<block v-if="ticketList3Num">
							<span>老人票 × {{ ticketList3Num }}份</span>
						</block>
					</view>
					<view class="date">
						<text>游玩日期</text>
						<text>{{ myList.scenicOrderMap.playDate || '' }}</text>
					</view>
					<u-line></u-line>
					<view class="position">
						<u-icon name="map" :label="myList.scenicOrderMap.spotAddress" size="30rpx"
							labelSize="26rpx"></u-icon>
					</view>

				</template>
				<template v-else>
					<view class="tips">
						根据景点购票规则，您的年龄在免票年龄范围内，无需购买门票，可携带身份证件去线下验证，即可游玩～
					</view>
				</template>

			</view>

			<!-- 船票信息 -->
			<view class="selectType2" v-if='currentSelected == 2 && !cancelStatus'>
				<view class="time">
					<text>{{ myList.isShipOrderListDTO.sailDate.substring(0, 10) || '' }}</text>
					<view><u-icon name="clock" size="28rpx"></u-icon>
						<view style="">{{ myList.isShipOrderListDTO.timeMemos || '' }}</view>
					</view>

				</view>
				<view class="shipping">
					<text class="left">{{ myList.isShipOrderListDTO.sailTime.substring(0, 5) || '' }}</text>
					<image src="@/static/index/packageArea/line.png" mode="aspectFit" style="height: 104rpx;
				width: 10rpx;margin-right: 20rpx;margin-top: 36rpx;"></image>
					<view class="right">
						<view>{{ myList.isShipOrderListDTO.startPortName || '上海虹桥长途站' }}</view>

						<view>{{ myList.isShipOrderListDTO.endPortName || '嵊泗泗礁' }}</view>
					</view>
				</view>
				<u-line color="#EFEFEF"></u-line>
				<view class="shipInfo">
					<view>{{ myList.isShipOrderListDTO.lineNum+''+myList.isShipOrderListDTO.sx }} {{ myList.isShipOrderListDTO.clxm }}</view>
					<view>
						<template v-if="myList.isShipOrderListDTO.busStartTime">
							<text>车船联票：</text>
							<text>开车时间</text>
							<text class="mr5">{{ myList.isShipOrderListDTO.busStartTime || '' }}</text>
						</template>
						<text>开船时间:</text>
						<text>{{ myList.isShipOrderListDTO.sailTime || '' }}</text>
					</view>
				</view>
			</view>
			<view class="voucherCode">
				<view class="title">
					<text>凭证码</text>
					<text class="orange">凭有效身份证件或凭证码直接验证使用</text>
				</view>
				<view class="codeList" v-if='currentSelected == 1&&myList.scenicOrderMap.ticketList&& myList.status == 1'>
					<view class="listItem">
						<view class="name">
							<text @click="checkName(i)" :class="nameIndex == i ? 'on' : ''"
								v-for="(n, i) in myList.scenicOrderMap.ticketList" :key="i">{{ n.realName }}</text>
						</view>
						<view class="code">
							<view v-for="(n, i) in myList.scenicOrderMap.ticketList" :key="i">
								<view v-show="nameIndex == i" class="codeIb">
									<canvas :canvas-id="'qrcode1' + i" v-show="!qr_code[i]"
										style=" margin:0 auto;width:280rpx;height: 280rpx;"></canvas>
									<image :src="qr_code[i]" v-if="qr_code[i]"
										style="margin:0 auto;width:280rpx;height: 280rpx;">
									</image>
								</view>
							</view>
						</view>
						<view class="time"><text>入园时间</text>{{ myList.scenicOrderMap.openDate }}</view>
					</view>
				</view>
				<!-- 船票 -->
				<view class="codeList2" v-if='currentSelected == 2'>
					<view class="code_list_box" v-for="(item, index) in myList.isShipOrderListDTO.detailDTOList"
						:key="index">
						<view class="listItem">
							<text class="icon" v-if="myList.status == 1">{{ osConfig[myList.status] }}</text>
							<view class="codeList_left">
								<view class="name" :class="myList.status != 1 ? 'disabled' : ''">
									{{ item.passName }}
									<text class="ticketType">{{ item.priceType == 1 ? '成人票' : '儿童票' }}</text>
								</view>
								<view class="l2" :class="myList.status != 1 ? 'disabled' : ''">
									<text style="margin-right: 20rpx;">身份证</text>
									{{ item.credentialNum }}
								</view>
								<view class="l3" :class="myList.status != 1 ? 'disabled' : ''">
									<text>{{ item.seatClassName }}</text>
									<text style="margin: 0 10rpx;">序号</text>
									<text>{{ item.seatNumber }}</text>
								</view>
								<view class="l3" :class="myList.status != 1 ? 'disabled' : ''">
									￥{{ item.realFee }}
								</view>
							</view>
							<view class="codeList_right" v-if="item.itemState==2||item.itemState==5"
								@tap="showEwm(qr_code2[index])">
								<canvas :canvas-id="'qrcode2' + index"
									style="margin-top:20rpx;width:180rpx;height: 180rpx;"
									v-show="!qr_code2[index]"></canvas>
								<image class="pmr_ewm" :src="qr_code2[index]" v-if="qr_code2[index]">
								</image>
								<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
							</view>
						</view>
						<!-- <template v-if="item.freeChilInfoList && item.freeChilInfoList.length > 0">
							<view class="listItem" v-for="idr in item.freeChilInfoList" :key="idr.id">
								<text class="icon" v-if="myList.status == 1">{{ osConfig[myList.status] }}</text>
								<view class="codeList_left">
									<view class="name" :class="myList.status != 1 ? 'disabled' : ''">
										{{ idr.childName }}
										<text class="ticketType">免票儿童</text>
									</view>
									<view class="l2" :class="myList.status != 1 ? 'disabled' : ''">
										<text style="margin-right: 20rpx;">身份证</text>
										{{ idr.card }}
									</view>
									<view class="l3" :class="myList.status != 1 ? 'disabled' : ''">
										<text>{{ item.seatClassName }}</text>
										<text style="margin: 0 10rpx;">序号</text>
										<text>{{ item.seatNumber }}</text>
									</view>
									<view class="l3" :class="myList.status != 1 ? 'disabled' : ''">
										￥ 0
									</view>
								</view>
								<view class="codeList_right">
									<canvas :canvas-id="'qrcode3' + index"
										style="margin-top:20rpx;width:180rpx;height: 180rpx;"></canvas>
								</view>
							</view>
						</template>
						 -->
						<view class="base_line"></view>
					</view>
				</view>
			</view>
			<view class="voucherCode" v-if="myList.status == 0">
				<!-- 待支付转态显示游客信息 -->
				<view class="codeList3">
					<view class="title">游客信息</view>
					<view class="listItem" v-for="(item, index) in myList.scenicOrderMap.ticketList" :key="index">
						<view class="codeList_left">
							<view class="name">
								{{ item.realName }}
								<text class="ticketType">{{ item.ticketType == 1 ? '成人票' : '儿童票' }}</text>
							</view>
							<view class="l2">
								<text style="margin-right: 20rpx;">身份证</text>
								{{ item.idCode }}
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 订单信息 -->
			<view class="orderInfo">
				<view class="tit">订单信息</view>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">订单编号</text>
					<text slot="title" class="val">{{ myList.orderCode }}<text class="copy"
							@tap="copyOrderId()">复制</text></text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">下单时间</text>
					<text slot="title" class="val"> {{ myList.orderTime }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">姓名</text>
					<text slot="title" class="val">{{ myList.isShipOrderListDTO.linkPerson }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">手机号码</text>
					<text slot="title" class="val">{{ myList.isShipOrderListDTO.linkPhone }}</text>
				</u-cell>
			</view>
		</view>
		<view class="btns">
			<!-- 待支付 -->
			<template v-if="myList.status == 0">
				<view @tap.stop="cancelOrder(myList)" class="b_">取消订单</view>
				<view @tap.stop="toPay(myList)" class="b_">立即支付</view>
			</template>
			<!-- 待使用 -->
			<template v-else-if="myList.status == 1">
				<view @tap.stop="goTotuikuan(myList)" class="b_">申请退款</view>
				<view @tap.stop="againReserve(myList)" class="b_">再次预订</view>
			</template>
			<!-- 退款中-->
			<template v-else-if="myList.status == -2">
				<view @tap.stop="againReserve(myList)" class="b_">再次预订</view>
			</template>
			<!-- 已取消,已退款 -->
			<template v-if="myList.status == -1 || myList.status == -3">
				<view @tap.stop="deleteOrder(myList)" class="b_">删除</view>
				<view @tap.stop="againReserve(myList)" class="b_">再次预订</view>
			</template>
			<!--已完成 -->
			<template v-if="myList.status == 3">
				<view @tap.stop="deleteOrder(myList)" class="b_">删除订单</view>
				<view @tap.stop="goToAppraise(myList)" class="b_">评价</view>
				<view @tap.stop="againReserve(myList)" class="b_">再次预订</view>
			</template>

		</view>
		<!-- 展示凭证二维码 -->
		<view class="ewmup">
			<u-popup :show="codeShow" mode="center" :round="16" @close="codeShow = false">
				<view class="ewm_details">
					<view class="ed_title">
						<text>凭证二维码</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="codeShow = false">
						</image>
					</view>
					<view class="ed_img">
						<image :src="codeImg" mode="widthFix"></image>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import UQrcode from '@/uqrcode.js'
	import bottomBar from '@/compoments/bottomBar/index.vue'
	export default {
		components: {
			bottomBar
		},
		data() {
			return {
				osConfig: {
					'0': '待支付',
					'1': '待使用',
					'-1': '已取消',
					'-2': '退款中',
					'-3': '已退款',
					'3': '已完成'
				},
				nameIndex: 0,
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '订单详情',
				price: 109,
				checkboxValue: '',
				cancelStatus: false,
				selectBar: ['景点订单信息', '船票订单信息'],
				currentSelected: 1,
				orderCode: '',
				complete:false,
				myList: {
					spotList: {},
					isScenicTicketDTOList: {
						scenicName: '六合朝阳景区',
						spotAddress: '舟山市嵊泗县五龙乡',
					},
					useStatus: 1,
					scenicName: '沈家湾-嵊泗船票单程+六合朝阳景区门票',
					ticketList: [{
						ticketName: '六合朝阳景区',
						realName: '韦祥',
						idCode: '341221199601023850',
						orderCode: '6522870321821b97C67A86f8',
						createDate: '2023-09-08 18:40:30',
						linkMobile: '18160883036'
					}],
					num: 2,

				},
				show: false,
				ticketList1Num: 0,
				ticketList2Num: 0,
				ticketList3Num: 0,
				ticketList3: [],
				qr_code: [],
				qr_code2: [],
				//qr_code3: [],
				djsTime: 0,
				codeShow: false,
				codeImg: ''
			}
		},
		onLoad(option) {
			this.orderId = option.orderCode
			this.getList()
		},
		watch: {
			currentSelected(newval, oldval) {
				if (newval != oldval) {
					this.setCOde('qrcode' + newval);
				}
			},
		},
		methods: {
			showEwm(src) {
				this.codeShow = true;
				this.codeImg = src;
			},
			//评价
			goToAppraise(item) {
				const obj = {
					guideId: item.id,
					orderCode: item.orderCode,
					sourceType: 7
				}
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj)
				})
			},
			//再次预订
			againReserve(item) {
				uni.redirectTo({
					url: '/pagesTrip/packageArea/index?turnType=1'
				})
			},
			//删除
			deleteOrder(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除？',
					success: function(res) {
						if (res.confirm) {
							that.$api.get('/api/shipScenic/delSsOrder/' + item.id).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已删除');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pagesMy/order/index?name=船票+景点&type=0&typeIndex=4'
										})
									}, 300)
								}
							})
						}
					}
				});
			},
			//取消订单
			cancelOrder(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.$api.get('/api/shipScenic/cancelOrder/' + item.orderCode).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已取消');
									setTimeout(() => {
										that.djsTime = 0;
										uni.reLaunch({
											url: '/pagesMy/order/index?name=船票+景点&type=0&typeIndex=4'
										})
									}, 1000)
								} else that.$showToast(res.data.msg)
							})
						}
					}
				});
			},
			//切换景区和船票信息
			tabBarClick(index) {
				this.currentSelected = index
			},
			//切换名字
			checkName(index) {
				this.nameIndex = index;
			},
			//绘制canvas
			qrFun: function(name, text, index, ticketList) {
				let that = this;
				let canvasId = name + index;
				let size = this.currentSelected == 1 ? 140 : 90;
				UQrcode.make({
					canvasId: canvasId, //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text,
					size: size,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						if (name == 'qrcode1') {
							that.qr_code.push(res);
						} else {
							that.qr_code2.push(res);
						}
						return new Promise((resolve, reject) => {
							resolve(res)

						})
					}
				})
			},

			goTotuikuan() {
				uni.$once('toSendData', () => {
					uni.$emit('sendData', this.myList)
				})
				uni.navigateTo({
					url: '/pagesTrip/packageArea/tuikan'
				})
			},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			//获取详情
			getList() {
				this.$api.get('/api/shipScenic/getSsPersonalOrderInfo/' + this.orderId)
					.then(res => {
						this.myList = res.data.data;
						this.complete=true;
						if (this.myList.status == 0) {
							let diffMS = Date.parse(new Date(this.myList.isShipOrderListDTO.expireTime)) - Date.parse(
								new Date());
							if (diffMS > 0) this.djsTime = diffMS;
						}
						this.setCOde('qrcode1');
						this.price = this.myList.isShipOrderListDTO.totalPayFee;
						if (this.myList.scenicOrderMap.ticketList) {
							this.myList.scenicOrderMap.ticketList.forEach(t => {
								if (t.menpiaoId == '273') {
									if (t.age > 5 && t.age < 19) {
										t.ticketType2 = 3
									} else {
										t.ticketType2 = 1
									}
								} else t.ticketType2 = t.ticketType
							})

							//成人票
							this.ticketList1Num = this.myList.scenicOrderMap.ticketList.filter((item) => item
								.ticketType2 ==
								1).length;
							//儿童票
							this.ticketList2Num = this.myList.scenicOrderMap.ticketList.filter((item) => item
								.ticketType2 ==
								3).length;
							//老人票
							this.ticketList3Num = this.myList.scenicOrderMap.ticketList.filter((item) => item
								.ticketType2 ==
								2).length;
							// 免票儿童
							// this.ticketList3 = this.myList.scenicOrderMap.ticketList.filter(item => !item.freeChilInfoList)
							//this.getCalculateCommission();
						}
					})
			},
			//获取手续费
			getCalculateCommission() {
				this.$api.post('/scenic/scenic-order/calculateCommission', {
					orderCode: this.myList.orderCode,
					touristIds: [this.myList.id]
				}).then(res => {
					console.log(res)
				})
			},
			//绘制二维码
			async setCOde(name) {
				if (name == 'qrcode1') {
					let ticketList = this.myList.scenicOrderMap.ticketList;
					for (let i = 0; i < ticketList.length; i++) {
						let d = await this.qrFun(name, ticketList[i].barcode, i);

					}
				} else {
					let ticketList = this.myList.isShipOrderListDTO.detailDTOList;
					for (let i = 0; i < ticketList.length; i++) {
						let d = await this.qrFun(name, (this.myList.isShipOrderListDTO.buyTicketType==1?'0':(this.myList.isShipOrderListDTO.buyTicketType==2?'2':''))+ticketList[i].obtainTicketNum, i);
					}
				}

			},
			//复制订单号
			copyOrderId() {
				uni.setClipboardData({
					data: this.myList.orderCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
				})
			},
			confrimPay(item) {
				this.$api.get('/api/shipScenic/getSsPersonalOrderInfo/' + this.orderId).then(resu => {
					if (resu.data.code === 0) {
						if(resu.data.data.status==0){
							this.$api.post('/order/icbc/createOrder', {
								orderCode: this.myList.orderCode,
								tradeType: 'JSAPI',
								openId: JSON.parse(uni.getStorageSync('userInfo')).openId
							}, false).then(res => {
								if (res.statusCode == 200 && res.data != null) {
									this.payShow = false;
									this.$wxPay(res.data).then(result => {
										uni.reLaunch({
											url: '/pagesMy/order/index?name=船票+景点&type=0&typeIndex=4'
										})
									})
								}
							})
						}else this.$showToast('不可支付，请返回列表刷新');
					}else this.$showToast(resu.data.msg);
				})
			},
			finish() {
				this.$api.get('/api/shipScenic/cancelOrder/' + this.myList.orderCode).then(res => {
					setTimeout(() => {
						this.djsTime = 0;
						uni.reLaunch({
							url: '/pagesMy/order/index?name=船票+景点&type=0&typeIndex=4'
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ewmup {
		/deep/.u-popup__content {
			width: calc(100% - 48rpx);
		}

		.ewm_details {
			.ed_title {
				width: 100%;
				height: 110rpx;
				background: #F5F8FA;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 36rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.ed_img {
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 480rpx;
					height: 480rpx;
				}
			}
		}
	}

	.tips {
		font-size: 30rpx;
		color: #FF4141;
		line-height: 40rpx;
	}

	page {
		background-color: #F5F8FA;


		.content {
			position: relative;
			padding: 0 24rpx;
			z-index: 3;
			padding-bottom: 160rpx;

		}
	}

	.page {
		background-color: #F5F8FA;

		.disabled {
			color: #AAA !important;
		}
	}

	.cancel {
		font-size: 24rpx;

		.cancelReason {
			margin: 23rpx 20rpx;
			padding: 10rpx 24rpx 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.title {
				margin: 20rpx 0;
				align-items: center;
				font-size: 32rpx;
			}

			.redioGroup {
				display: flex;
				width: 100%;
				justify-content: space-between;
				font-size: 26rpx;
				padding: 16rpx 10rpx;
				line-height: 26rpx;

			}
		}

		.cancelRole {
			margin: 23rpx 20rpx;

			padding: 10rpx 24rpx 20rpx;

			border-radius: 20rpx;
			background-color: #fff;

			.title {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
				align-items: center;


				&_left {
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
					font-family: PingFang-SC-Bold, PingFang-SC;
				}

				&_right {
					display: flex;
					flex-direction: row;
					color: #777777;
					line-height: 30rpx;
					align-items: center;
				}
			}

			.checkBoxItem {
				display: flex;
				justify-content: space-between;

				align-items: center;

				&_left {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					width: 100%;
					border-bottom: 0.5rpx solid #efefef;
					align-items: center;
					padding: 20rpx 17rpx;

					.info {
						display: flex;
						flex-direction: column;
						color: #777777;

						.name {
							color: #333;
							font-weight: 500;
							font-size: 34rpx;
							margin: 20rpx 0;

							.ticketType {
								margin-left: 20rpx;
								font-weight: 400;
								color: #94A9C8;
								line-height: 33rpx;
								height: 33rpx;
								font-size: 24rpx;
								background: #F5F8FA;
								border-radius: 8rpx;
								padding: 4rpx;
							}
						}

					}

					.price {
						color: red;
						font-size: 26rpx;
						line-height: 26rpx;

					}
				}

				&_right {
					color: #777777;
					line-height: 30rpx;
				}
			}
		}


	}


	.bg {
		height: 640rpx;
		top: 0;
		position: fixed;
		z-index: 1;
		width: 100%;
		margin-top: -1px;
		background: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 16rpx;
		padding-bottom: 20rpx;

		.cell {
			display: flex;
			justify-content: space-between;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #999;
			width: 112rpx;
		}

		.icon {
			font-size: 28rpx;
			color: #999;

		}

		.val {
			font-size: 28rpx;
			padding-left: 56rpx;
			color: #333;

			.copy {
				color: #007A69;
				border: #007A69 1rpx solid;
				width: 70rpx;
				height: 32rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
				display: inline-block;
				text-align: center;
				line-height: 32rpx;
				margin-left: 30rpx;
			}
		}
	}

	//购票凭证
	.voucherCode {
		margin: 20rpx 0;
		padding: 0 24rpx 8rpx;
		border-radius: 16rpx;
		background-color: #fff;
		z-index: 2;

		.title {
			font-size: 32rpx;
			color: #111;
			padding: 40rpx 0 30rpx 0;
			font-weight: bold;
		}

		//景区
		.codeList {
			.listItem {
				margin-bottom: 22rpx;

				.name {
					text {
						display: inline-block;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						border: 1rpx solid #DEDEDE;
						font-size: 28rpx;
						color: #333;
						margin-right: 30rpx;

						&.on {
							background-color: #007A69;
							color: #fff;
						}
					}

				}

				.code {
					margin: 30rpx 0 48rpx;

					.codeIb {
						height: 286rpx;
					}
				}

				.time {
					font-size: 28rpx;

					text {
						margin-right: 35rpx;
					}
				}


			}
		}

		//船票
		.codeList2 {
			.base_line {
				width: 100%;
				height: 1px;
				background: #EFEFEF;
				margin-bottom: 30rpx;
			}

			.code_list_box:last-child {
				.base_line {
					display: none;
				}
			}

			.listItem {
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 36rpx 24rpx;
				font-size: 26rpx;
				line-height: 26rpx;
				color: #666;
				position: relative;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.06);

				.icon {
					position: absolute;
					top: 0;
					right: 0;
					width: 112rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #fee;
					color: #FEA400;
					font-size: 24rpx;
					text-align: center;
				}

				.codeList_left {
					.name {
						font-size: 30rpx;
						color: #333;
						line-height: 42rpx;

						.ticketType {
							margin-left: 30rpx;
							font-weight: 400;
							color: #94A9C8;
							line-height: 15px;
							height: 36rpx;
							font-size: 24rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;
							display: inline-block;
							box-sizing: border-box;

						}
					}

					.l2 {
						margin: 14rpx 0 36rpx;
						font-size: 24rpx;
						color: #666;

					}

					.l3 {
						color: #666;
						font-size: 28rpx;
						margin-bottom: 24rpx;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.codeList_right {
					width: 180rpx;
					height: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-top: 20rpx;

					image {
						position: absolute;
					}

					.pmr_ewm {
						width: 100%;
						height: 100%;
						z-index: 1;
					}

					.pmr_fd {
						width: 46rpx;
						height: 46rpx;
						z-index: 2;
					}
				}

			}
		}

		//游客信息
		.codeList3 {
			.listItem {
				.codeList_left {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #EFEFEF;

					&:last-child {
						border-bottom: none;
					}

					.name {
						font-size: 32rpx;
						color: #333;
						line-height: 42rpx;

						.ticketType {
							margin-left: 18rpx;
							font-weight: 400;
							color: #808080;
							line-height: 15px;
							height: 36rpx;
							font-size: 20rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;
							display: inline-block;
							box-sizing: border-box;

						}
					}

					.l2 {
						font-size: 26rpx;
						line-height: 26rpx;
						color: #333;

					}

				}
			}
		}

	}

	.selectBar {
		display: flex;
		flex-direction: row;
		margin: 30rpx 0 0;
		border-top-left-radius: 17rpx;
		border-top-right-radius: 16rpx;
		overflow: visible;
		background: white;

		.bar {
			width: 50%;
			height: 96rpx;
			font-size: 32rpx;
			color: #111;
			line-height: 96rpx;
			text-align: center;
			position: relative;
		}

		.s1 {
			background: url('https://i.ringzle.com/file/20240301/742f3d3168534647a60a29ea5288587b.png')center no-repeat;
			background-size: 100% 100%;
			font-weight: inherit;
		}

		.s2 {
			background: url('https://i.ringzle.com/file/20240301/7ef18288a69d4bb589f83787c80ba622.png')center no-repeat;
			background-size: 100% 100%;
			font-weight: inherit;
		}

	}

	//景区信息样式
	.selectType2 {
		margin-bottom: 20rpx;
		padding: 36rpx 24rpx 0;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		background-color: #fff;
		z-index: 2;
		margin-top: -1px;

		.time {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:nth-child(1) {
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #111111;
				line-height: 30rpx;
				height: 30rpx;
				font-size: 30rpx;
			}

			view:nth-child(2) {
				color: #999999;
				line-height: 24rpx;
				display: flex;
				align-items: center;
				margin-left: 12rpx;
			}

		}

		.shipping {
			display: flex;
			flex-direction: row;

			height: 88px;

			.left {
				width: 30%;
				text-align: center;
				align-items: center;
				height: 40rpx;
				font-size: 40rpx;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #333333;
				line-height: 110rpx;
				height: 100%;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-size: 32rpx;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #333333;
				height: 100%;

				// view:nth-child(2) {
				// 	margin-top: 26rpx;

				// }
			}


		}

		.shipInfo {
			padding: 24rpx 0 40rpx;
			color: #999999;
			line-height: 24rpx;

			.mr5 {
				margin-right: 10rpx;
			}

			view {
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

			}
		}



	}

	//船票信息样式
	.selectType {
		margin-bottom: 20rpx;
		padding: 40rpx 24rpx 0;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		background-color: #fff;
		z-index: 2;
		margin-top: -1px;
		min-height: 268rpx;

		.name {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			line-height: 36rpx;

			.ticketType {
				margin-left: 20rpx;
			}
		}

		.date {
			margin-bottom: 24rpx;
			line-height: 26rpx;

			text {
				font-size: 26rpx;
				line-height: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}

		.position {
			padding: 24rpx 0 36rpx;
			font-size: 26rpx;
			color: #808080;
			line-height: 26rpx;

		}

		.type {
			padding: 24rpx 0 24rpx;
			font-size: 26rpx;
			color: #808080;
			line-height: 26rpx;
		}

		.prices {

			.txt,
			.num {
				color: #666;
				font-size: 26rpx;
			}

			.txt {
				margin-left: -30rpx;
			}

			.num {
				margin-right: -30rpx;
			}
		}

		.title {
			font-size: 36rpx;
			color: #333;
		}



	}

	.orange {
		color: #FF7D01;
		margin-left: 30rpx;
		font-size: 26rpx;
	}

	.ticketInfo {
		padding: 36rpx 24rpx 0;
		border-radius: 16rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;
		height: 156rpx;
		box-sizing: border-box;

		.name {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.code {
		margin-top: 40rpx;
		text-align: center;
		position: relative;

		.cover,
		.sx {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			width: 340rpx;
			height: 340rpx;
			top: 66rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sx {
			width: 120rpx;
			height: 120rpx;
			top: 150rpx;
			background: transparent;
		}

		.txt {
			font-size: 28rpx;
		}

		image {
			width: 340rpx;
			height: 340rpx;
			margin: 30rpx 0;
		}
	}

	//头部样式
	.head {
		padding: 40rpx 16rpx 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.t_left {
			text {
				font-size: 44rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.t_right {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 26rpx;

				text {
					font-size: 44rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
				}
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

	}

	.djs {
		width: calc(100% - 88rpx);
		padding: 0 20rpx;
		margin-bottom: 35rpx;
		position: relative;
	}

	.btns {
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 16rpx 30rpx 30rpx 30rpx;
		background-color: #fff;
		gap: 0 30rpx;
		width: 750rpx;
		box-sizing: border-box;

		.b_ {
			width: 100rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			color: #333;
			text-align: center;
			background-color: #F6F6F6;
			font-size: 28rpx;
			font-weight: bold;

			&:last-child {
				background-color: #007A69;
				color: #fff;
			}
		}
	}

	// 费用明细
	.feeDetail {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		height: 600rpx;
		overflow: auto;
		padding: 50rpx 30rpx;
		border-bottom: 1px solid #eee;

		.tit {
			display: flex;
			margin-bottom: 60rpx;

			text {
				font-size: 33rpx;
				font-weight: 600;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #333;
				width: 92%;
				text-align: center;
			}
		}

		.list {
			vertical-align: middle;

			.top {
				font-size: 24rpx;
				color: #999999;
			}

			.sum {
				display: flex;
				justify-content: space-between;
				color: #333333;
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 5rpx;
				align-items: center;
				padding: 0 34rpx;
				margin: 30rpx 0 20rpx 0;

				text:nth-child(2) {
					color: #FF4141;
				}
			}

			.note {
				height: 24rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;

			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-top: 100rpx;



			}

		}
	}

	/deep/.u-button--large.data-v-2bf0e569 {
		width: 282rpx;
		font-size: 27rpx;

	}
</style>